<template>
  <v-app-bar
    app
    fixed
    color="primary"
    density="compact"
    scroll-behavior="elevate"
    dark
  >
    <template v-slot:prepend>
      <v-btn
        icon="mdi-chevron-left"
        @click="goBack"
      ></v-btn>
    </template>
    <v-app-bar-title>{{ title }}</v-app-bar-title>
  </v-app-bar>

  <v-main class="pt-0">
    <v-container class="questionnaire">
      <v-sheet
        class="pa-4"
        elevation="4"
        rounded
      >
        <p>尊敬的用户，您好!</p>
        <p class="mb-4">
          &nbsp&nbsp&nbsp&nbsp为了更好地为您提供服务和准确的体质分析，希望您能对以下体质检测结果的各个部分进行反馈。请根据您的实际感受，在每个部分后的选项中选择最符合您看法的一项。感谢您的配合！
        </p>

        <v-form
          ref="form"
          v-if="questions.length > 0"
        >
          <!-- 动态生成问卷问题 -->
          <div
            v-for="(question, index) in questions"
            :key="index"
          >
            <v-divider class="my-2"></v-divider>
            <p class="font-weight-bold">
              {{ index + 1 }}.
              {{ questTemplate.replace("{0}", question.qType) }}
            </p>
            <v-sheet
              color="orange-lighten-5"
              class="pa-3 border-left"
            >
              {{ question.descText }}
            </v-sheet>
            <v-radio-group
              v-model="answers[index]"
              :mandatory="true"
              class="mb-0"
            >
              <v-radio
                v-for="(option, optionIndex) in options"
                :key="optionIndex"
                :label="option.label"
                :value="option.value"
                class="ml-4"
              ></v-radio>
            </v-radio-group>
          </div>
        </v-form>

        <!-- 加载状态 -->
        <v-alert
          v-else-if="loading"
          type="info"
          class="mt-6"
        >
          加载问卷中，请稍候...
        </v-alert>

        <!-- 错误状态 -->
        <v-alert
          v-else
          type="error"
          class="mt-6"
        >
          无法加载问卷内容，请稍后再试。
        </v-alert>
      </v-sheet>
      <v-row class="justify-center mt-4">
        <!-- 提交按钮 -->
        <v-btn
          type="submit"
          color="primary"
        >
          提交问卷
        </v-btn>
      </v-row>
    </v-container>
  </v-main>
</template>

<script setup>
  import { ref, reactive } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { getFeedbackQuest } from "../api"

  const title = '反馈问卷'
  const loading = ref(false);
  const route = useRoute();
  const router = useRouter();

  const questions = [];

  const answers = reactive([]);
  const options = [
    { label: "A. 不认同", value: "A" },
    { label: "B. 不太认同", value: "B" },
    { label: "C. 一般", value: "C" },
    { label: "D. 比较认同", value: "D" },
    { label: "E. 非常认同", value: "E" },
  ];

  const questTemplate = "关于本次{0}部分的描述，您是否认同? ";
  const goBack = () => {
    router.go(-1)
  }
  onMounted(async () => {
    loading.value = true
    try {
      const response = await getFeedbackQuest(route.params.id)
    } catch (error) {
      console.error("获取数据失败", error);
      loading.value = false;
      if (error.response && error.response.data.message) {
        errorMessage.value = error.response.data.message;
      } else {
        errorMessage.value = "获取数据异常";
      }
    }
  })
</script>

<style scoped>
  .questionnaire {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
  }
  .border-left {
    border-left: orangered 2px solid;
  }
</style>
